<template>
  <div class="share-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>报警监控</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/alarm-monitoring' }">报警信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="monitoring-content">
      <div class="content trend">
        <div class="handle-count">
          <div class="title">报警趋势</div>
          <div class="item">
            <div class="name">当前报警数</div>
            <div>3</div>
          </div>
          <div class="item">
            <div class="name">已派单处理</div>
            <div>3</div>
          </div>
          <div class="item">
            <div class="name">今日处理数</div>
            <div>3</div>
          </div>
        </div>
        <div class="echarts" style="width: calc(100% - 400px);">
          <div id="main" style="width: 100%; height: 240px"></div>
          <div class="tip">
            趋势图只统计当天发生的报警，不累计之前没处理报警
          </div>
        </div>
        <div class="count">
          <div class="title">近七天报警统计</div>
          <div class="count-item">
            <span>设备报警数：</span>
            <span>3</span>
          </div>
          <div class="count-item">
            <span>总报警数：</span>
            <span>3</span>
          </div>
        </div>
      </div>
      <div class="content tables">
        <div class="tab">
          <div class="left">
            <el-button round :color="tabActive == 1 ? '#0071bb' : ''" @click="changeTab(1)">报警列表</el-button>
            <el-button round :color="tabActive == 2 ? '#0071bb' : ''" @click="changeTab(2)">历史修复</el-button>
          </div>
          <div class="right">
            <span class="dispatch">派单逻辑</span>
            <div class="">
              <span class="check">
                <el-icon>
                  <Check />
                </el-icon>
              </span>
              <span class="text">自动派给设备补货员</span>
            </div>
            <span class="repair" @click="onRepair()">修复逻辑</span>
          </div>
        </div>
        <div class="search">
          <el-form :inline="true" :model="formInline" v-if="tabActive == 1" style="width:100%">
            <div class="search-item">
              <el-form-item label="按设备">
                <el-select v-model="formInline.region" placeholder="请选择" style="width:200px">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="按报警类型">
                <el-select v-model="formInline.region" placeholder="请选择" style="width:200px">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="按步骤">
                <el-select v-model="formInline.region" placeholder="请选择" style="width:200px">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <span class="btn">
                <el-button round :icon="Refresh" style="margin-right:10px">刷新</el-button>
                <!-- <el-button round color="#0071bb" :icon="HelpFilled">筛选</el-button> -->
                <el-dropdown :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button round color="#0071bb" :icon="HelpFilled">筛选</el-button> </span>
                  <template #dropdown>
                    <el-dropdown-menu style="max-height:300px">
                      <el-dropdown-item v-for="(item, index) in checkArr" :key="index"
                        @click.stop="filterTableData(item)">
                        <el-checkbox v-model="item.show" size="large" :label="item.label" />
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </span>
            </div>
          </el-form>
          <el-form :inline="true" :model="formInline" v-if="tabActive == 2" style="width:100%">
            <div class="search-item">
              <el-form-item label="按设备">
                <el-select v-model="formInline.region" placeholder="请选择" style="width:200px">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="按报警类型">
                <el-select v-model="formInline.region" placeholder="请选择" style="width:200px">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="按处理人">
                <el-select v-model="formInline.region" placeholder="请选择" style="width:200px">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <span class="btn">
                <el-button round :icon="Refresh" style="margin-right:10px">刷新</el-button>
                <!-- <el-button round color="#0071bb" :icon="HelpFilled">筛选</el-button> -->
                <el-dropdown :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button round color="#0071bb" :icon="HelpFilled">筛选</el-button> </span>
                  <template #dropdown>
                    <el-dropdown-menu style="max-height:300px">
                      <el-dropdown-item v-for="(item, index) in checkArrHistory" :key="index"
                        @click.stop="filterTableDataHistory(item)">
                        <el-checkbox v-model="item.show" size="large" :label="item.label" />
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </span>
            </div>
            <div class="search-item">
              <el-form-item label="按上报时间">
                <el-select v-model="formInline.region" placeholder="请选择" style="width:200px">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="按派单时间">
                <el-select v-model="formInline.region" placeholder="请选择" style="width:200px">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="按修复时间">
                <el-select v-model="formInline.region" placeholder="请选择" style="width:200px">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <span class="btn">
                <el-button round color="#0071bb">导出列表</el-button>
              </span>
            </div>
          </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%" v-if="tabActive == 1">
          <el-table-column prop="id" label="序号" />
          <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in headerArr" :key="index">
          </el-table-column>
        </el-table>
        <el-table :data="tableDataHistory" style="width: 100%" v-if="tabActive == 2">
          <el-table-column prop="id" label="序号" />
          <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in headerArrHistory"
            :key="index"></el-table-column>
        </el-table>
      </div>
      <!-- 底部分页 -->
      <div class="page_number">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size" :disabled="disabled"
          layout="prev, pager, next, jumper,total" :total="10" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <EditDispatch v-if="showRepair" @close="onClose()" @submit="onSubmit()"></EditDispatch>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
import { Check } from '@element-plus/icons-vue'
import type { ComponentSize } from 'element-plus'
import * as echarts from "echarts";
import EditDispatch from './components/editDispatch.vue'
import { Refresh, Search, RefreshLeft, HelpFilled } from "@element-plus/icons-vue";
interface searchList {
  name: string;
  index: string;
  placeholder: string;
  type: string;
  ivalue: string;
}
const input1 = ref('自动派给设备补货员')
const whole = ref(false)
const choiceIndex = ref("");
const currentPage = ref(1);
const pageSize = ref(1);
const size = ref<ComponentSize>('small')
const disabled = ref(false)
const tableData = [
  {
    id: '1',
    name: '伯克材料3668649',
    step: '派单',
    type: '离线报警'
  },
]
const tabActive = ref(1)
const formInline = ref({
  user: '',
  region: ''
})
const changeTab = (value: number) => {
  tabActive.value = value
}
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const showRepair = ref(false)
const onRepair = () => {
  showRepair.value = true
}
// 提交
const onSubmit = () => {
  showRepair.value = false
}
// 关闭弹窗
const onClose = () => {
  showRepair.value = false
}
// 报警列表选中的属性
const checkArr = ref<any>([
  { label: '设备名称', prop: 'name', show: true },
  { label: '设备类型', prop: 'type', show: true },
  { label: '步骤', prop: 'step', show: true }
])
// 报警列表表头
const headerArr = ref<any>([
  { label: '设备名称', prop: 'name', show: true },
  { label: '设备类型', prop: 'type', show: true },
  { label: '步骤', prop: 'step', show: true }
])
// 报警列表点击触发方法
const filterTableData = (item: any) => {
  setTimeout(() => {
    headerArr.value = checkArr.value.filter((item: any) => item.show == true)
  }, 500)
}
// 历史修复表格数据
const tableDataHistory = [
  {
    id: 1,
    name: '伯克材料3668649',
    type: '离线报警',
    by: '小周',
    time: '2024-04-12',
    disTime: '2024-04-12',
    reqTime: '2024-04-12',
  },
  {
    id: 2,
    name: '伯克材料3668649',
    type: '离线报警',
    by: '小周',
    time: '2024-04-12',
    disTime: '2024-04-12',
    reqTime: '2024-04-12',
  },
]
// 历史修复选中的属性
const checkArrHistory = ref<any>([
  { label: '设备名称', prop: 'name', show: true },
  { label: '设备类型', prop: 'type', show: true },
  { label: '处理人', prop: 'by', show: true },
  { label: '上报时间', prop: 'time', show: true },
  { label: '派单时间', prop: 'disTime', show: true },
  { label: '修复时间', prop: 'reqTime', show: true }
])
// 历史修复表头
const headerArrHistory = ref<any>([
  { label: '设备名称', prop: 'name', show: true },
  { label: '设备类型', prop: 'type', show: true },
  { label: '处理人', prop: 'by', show: true },
  { label: '上报时间', prop: 'time', show: true },
  { label: '派单时间', prop: 'disTime', show: true },
  { label: '修复时间', prop: 'reqTime', show: true }
])
// 历史修复点击触发方法
const filterTableDataHistory = (item: any) => {
  setTimeout(() => {
    headerArrHistory.value = checkArrHistory.value.filter((item: any) => item.show == true)
  }, 500)
}
const initEcharts = () => {
  // 基于准备好的dom，初始化echarts实例
  let main = document.getElementById("main")
  if (!main) return
  var myChart = echarts.init(main);
  // 绘制图表
  myChart.setOption({
    xAxis: {
      type: 'category',
      data: ['2024-05-17', '2024-05-18', '2024-05-19', '2024-05-20', '2024-05-21', '2024-05-22', '2024-05-23']
    },
    yAxis: {
      type: 'value'
    },
    // legend: {
    // 	data: ['报警', '派单','处理','修复',]
    // },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      transitionDuration: 0,
      backgroundColor: 'rgba(0,0,0,.5)', // 自定义背景颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
    },
    series: [
      {
        name: '报警',
        type: 'line',
        stack: 'Total',
        itemStyle: {
          color: '#ff0000',
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '派单',
        type: 'line',
        stack: 'Total',
        itemStyle: {
          color: '#ffff00',
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '处理',
        type: 'line',
        stack: 'Total',
        itemStyle: {
          color: '#8bc53f',
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '修复',
        type: 'line',
        stack: 'Total',
        itemStyle: {
          color: '#29aae1',
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      }
    ]
  });
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    if (myChart) {
      myChart.resize();
    }
  });
}
onMounted(() => {
  initEcharts()
});

</script>
<style lang="scss" scoped>
.choice-page {
  background-color: #fff;
  margin-top: 20px;
  padding: 10px 10px 0px 10px;
}

.monitoring-content {
  background: #fff;
  margin-top: 20px;
  padding: 10px 10px 0px 10px;
}

.content {
  background: #f0f0f0;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

.trend {
  display: flex;
  padding: 0px;
}

.handle-count {
  width: 100px;
  padding: 10px 18px;

  .title {
    margin-bottom: 20px;
  }

  .item {
    margin-bottom: 20px;
    font-size: 12px;
  }

  .name {
    color: #808080;
  }
}

.count {
  width: 300px;
  background: #0071bb;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;

  div {
    margin-bottom: 10px;
  }

  .count-item {
    font-size: 14px;
  }
}

.echarts {
  position: relative;
}

.tip {
  color: #0000FF;
  position: absolute;
  top: 10px;
  right: 30px;
  font-size: 12px;
}

.tab {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  margin-bottom: 10px;
  padding: 0 10px;

  .right {
    display: flex;
    font-size: 14px;

    .check {
      background: #0071BB;
      color: #fff;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      padding: 4px 10px;
      border: 1px solid #0071BB;
    }

    .text {
      border: 1px solid #0071BB;
      color: #0071BB;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      padding: 4px 10px;
    }
  }

  .dispatch {
    color: #4D4D4D;
    margin-right: 10px;
    cursor: pointer;
  }

  .repair {
    color: #0071BB;
    margin-left: 10px;
    cursor: pointer;
  }
}

.search {
  display: flex;
  justify-content: space-between;
  // margin-bottom: 10px;
  padding: 0 10px;
}

.search-item {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .btn {
    align-self: right;
  }
}

.page_number {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
}

.tables {
  margin-top: 10px;
}
</style>
<style>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
</style>